@mixin menu-styles($background) {
  >ul>li>a {

    &:hover,
    &:focus {
      color: #fff;
      background-color: $background;
    }
  }
}

.hoverdown,
.hoverup {
  display: inline-block;
  position: relative;
}

.hoverdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: $zindex-dropdown;
  padding: 2px 0 0 0;
  margin: 0;

  &>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: $dropdown-bg;
    border: 1px solid $dropdown-fallback-border; // IE8 fallback
    border: 1px solid $dropdown-border;
    min-width: 160px;
    padding: 0;
    margin: 2px 0 0;
    text-align: left;
    background-clip: border-box;
    border-radius: $border-radius-base;
    @include box-shadow(0 6px 12px rgba(0, 0, 0, .175));

    &>li>a {
      padding: 6px 15px;
      display: block;
      clear: both;
      line-height: $line-height-base;
      color: $dropdown-link-color;
      white-space: nowrap;
      margin: 4px;
      font-weight: normal;
      font-size: $font-size-small;
      user-select: none;
      cursor: pointer;
      border-radius: 3px;

      &:hover,
      &:focus {
        color: $dropdown-link-hover-color;
        text-decoration: none;
        background-color: $dropdown-link-hover-bg;
      }
    }
  }

  &.hoverdown-menu-primary {
    @include menu-styles($btn-primary-bg);
  }

  &.hoverdown-menu-success {
    @include menu-styles($btn-success-bg);
  }

  &.hoverdown-menu-info {
    @include menu-styles($btn-info-bg);
  }

  &.hoverdown-menu-warning {
    @include menu-styles($btn-warning-bg);
  }

  &.hoverdown-menu-danger {
    @include menu-styles($btn-danger-bg);
  }
}

.hoverdown:hover .hoverdown-menu,
.hoverup:hover .hoverdown-menu {
  display: inline-block;
}

.hoverdown-menu-right {
  right: 0;
  left: auto; // Reset the default from `.dropdown-menu`
}


.divider {
  @include nav-divider($dropdown-divider-bg);
}

.hoverdown-menu>ul>.disabled>a {

  &,
  &:hover,
  &:focus {
    color: rgba($color: $gray-light, $alpha: 0.6);
  }

  &:hover,
  &:focus {
    text-decoration: none;
    cursor: $cursor-disabled;
    background-color: transparent;
    background-image: none; // Remove CSS gradient
    @include reset-filter;
  }
}

.pull-right>.hoverdown-menu {
  right: 0;
  left: auto;
}


.hoverup {
  .caret {
    content: "";
    border-top: 0;
    border-bottom: $caret-width-base dashed;
    border-bottom: $caret-width-base solid \9; // IE8
  }

  .hoverdown-menu {
    top: auto;
    bottom: 100%;
    padding-bottom: 2px;
  }
}


@media (min-width: $grid-float-breakpoint) {
  .navbar-right {
    .hoverdown-menu {
      right: 0;
      left: auto;
    }

    // Necessary for overrides of the default right aligned menu.
    // Will remove come v4 in all likelihood.
    .hoverdown-menu-left {
      left: 0;
      right: auto;
    }
  }
}